<template>
  <el-dialog v-model="dialogVisibleInner" title="详情" @close="handlerClose">
    <div class="upload-corner">
      <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :auto-upload="false"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :show-file-list="false"
          :on-change="handleAvatarChange"
          :before-upload="beforeAvatarUpload"
          ref="uploadRef"
      >
        <div class="uploader-container">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <div v-else class="uploader-placeholder">
            <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
            <span>点击上传</span>
          </div>
        </div>
      </el-upload>
    </div>
    <div class="add-contract">
      <el-card class="card" shadow="hover">
        <template #header>
          <h3 class="title">个人信息详情</h3>
        </template>

        <!-- 新增表单 -->
        <el-form :model="personalInfoForm" :rules="rules" ref="personalInfoFormRef" label-width="120px" style="max-width: 800px;">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="personalInfoForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否为顾客" prop="isCustomer">
                <el-select v-model="personalInfoForm.isCustomer" placeholder="请选择">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="投资类型" prop="investmentType">
                <el-input v-model="personalInfoForm.investmentType"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="gender">
                <el-select v-model="personalInfoForm.gender" placeholder="请选择">
                  <el-option label="男" :value="1"></el-option>
                  <el-option label="女" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="居住地址" prop="residenceAddress">
                <el-input v-model="personalInfoForm.residenceAddress"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话号码" prop="phoneNumber">
                <el-input v-model="personalInfoForm.phoneNumber"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="关联客户" prop="relatedCustomer">
                <el-input v-model="personalInfoForm.relatedCustomer"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="投资金额" prop="investmentAmount">
                <el-input v-model.number="personalInfoForm.investmentAmount"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="身份证号" prop="idCardNumber">
                <el-input v-model="personalInfoForm.idCardNumber"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="照片路径" prop="photoPath">
                <el-input v-model="personalInfoForm.photoPath"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 投资者信息 -->
        <el-divider content-position="left">投资者信息</el-divider>
        <el-button type="primary" @click="addInvestorRow">新增投资者</el-button>
        <el-table :data="personalInfoForm.investorsvoZbs" border style="width: 100%">
          <!-- 序号列 -->
          <el-table-column label="序号" width="80">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>

          <!-- 现有的投资者信息字段... 省略 -->

          <!-- 新增充电站信息字段 -->
          <el-table-column prop="stationName" label="充电站名称" width="200">
            <template #default="scope">
              <el-input v-model="scope.row.stationName"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="stationAttribute" label="充电站属性" width="200">
            <template #default="scope">
              <el-input v-model="scope.row.stationAttribute"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="stationType" label="充电站类型" width="200">
            <template #default="scope">
              <el-input v-model="scope.row.stationType"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="chargingPileCount" label="充电桩数量" width="150">
            <template #default="scope">
              <el-input-number v-model="scope.row.chargingPileCount" controls-position="right" :min="0"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="detailedAddress" label="详细地址">
            <template #default="scope">
              <el-input v-model="scope.row.detailedAddress"></el-input>
            </template>
          </el-table-column>
        </el-table>

        <!-- 项目信息 -->
        <el-divider content-position="left">项目信息</el-divider>
        <el-button type="primary" @click="addProjectRow">新增项目</el-button>
        <el-table :data="personalInfoForm.projects" border style="width: 100%">
          <!-- 序号列 -->
          <el-table-column label="序号" width="80">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="projectName" label="项目名称" width="180">
            <template #default="scope">
              <el-input v-model="scope.row.projectName"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="projectDescription" label="项目描述">
            <template #default="scope">
              <el-input v-model="scope.row.remarks"></el-input>
            </template>
          </el-table-column>
        </el-table>

        <el-row>
          <el-col :span="24" style="text-align: right;">
            <el-button type="primary" @click="submitForm(personalInfoFormRef)">保存</el-button>
            <el-button @click="resetForm(personalInfoFormRef)">重置</el-button>
          </el-col>
        </el-row>

      </el-card>
    </div>
  </el-dialog>
</template>

<script setup>
import {reactive, ref, onMounted, toRaw, defineProps, watch, defineEmits,nextTick } from 'vue';
import axios from 'axios';
import { ElMessage  } from 'element-plus'
import { useRoute } from 'vue-router';
const props = defineProps({
  dialog4Edit: Boolean, // 是否可见
  formId: Number,
  photoPath: String
});
const emit = defineEmits();
const handlerClose=(()=>{
  dialogVisibleInner.value = false;
  // 告诉父组件，当前子组件关闭了
  emit('eclose', false);
})
const imageUrl=ref(null)
watch(() => props.dialog4Edit, (newVal) => {

  dialogVisibleInner.value=newVal
  getlist()
  getimageUrl()
});
const getimageUrl=()=>{
  imageUrl.value= 'http://sp6zi9loh.hn-bkt.clouddn.com/'+props.photoPath
}


const getlist=(()=>{
  axios.get(`/Investors/getById?invId=${props.formId}`)
      .then(resp=>{
        personalInfoForm.value=resp.data
      })
})
const dialogVisibleInner=ref(false)
// 初始化 personalInfoForm 并设置默认值
const personalInfoForm = ref({
  investorsvoZbs: [], // 确保初始化为空数组
  projects: [] // 确保初始化为空数组
});

// 动态添加投资者行
const addInvestorRow = () => {
  personalInfoForm.value.investorsvoZbs.push({
    field1: '',
    field2: ''
    // 根据实际需要初始化其他字段
  });
};

// 动态添加项目行
const addProjectRow = () => {
  personalInfoForm.value.projects.push({
    projectName: '',
    projectDescription: ''
    // 根据实际需要初始化其他字段
  });
};

const router = useRoute();
onMounted(() => {

});

const personalInfoFormRef = ref(null);

// // 表单验证规则
// const rules = {
//   name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
//   isCustomer: [{ required: true, message: '请选择是否为顾客', trigger: 'change' }],
//   investmentType: [{ required: true, message: '请输入投资类型', trigger: 'blur' }],
//   gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
//   residenceAddress: [{ required: true, message: '请输入居住地址', trigger: 'blur' }],
//   phoneNumber: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
//   relatedCustomer: [{ required: false, message: '请输入关联客户', trigger: 'blur' }],
//   investmentAmount: [{ required: true, message: '请输入投资金额', trigger: 'blur' }],
//   idCardNumber: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
//   photoPath: [{ required: false, message: '请输入照片路径', trigger: 'blur' }]
// };

// 提交表单
// 提交表单
const personalInfoForm4Edit=ref({
  investors:{},
  investorsvoZbs: [], // 确保初始化为空数组
  projects: [] // 确保初始化为空数组
})
const submitForm = async () => {
  personalInfoForm4Edit.value.investors.id=personalInfoForm.value.id
  personalInfoForm4Edit.value.investors.name=personalInfoForm.value.name
  personalInfoForm4Edit.value.investors.isCustomer=personalInfoForm.value.isCustomer
  personalInfoForm4Edit.value.investors.investmentType=personalInfoForm.value.investmentType
  personalInfoForm4Edit.value.investors.gender=personalInfoForm.value.gender
  personalInfoForm4Edit.value.investors.residenceAddress=personalInfoForm.value.residenceAddress
  personalInfoForm4Edit.value.investors.phoneNumber=personalInfoForm.value.phoneNumber
  personalInfoForm4Edit.value.investors.relatedCustomer=personalInfoForm.value.relatedCustomer
  personalInfoForm4Edit.value.investors.investmentAmount=personalInfoForm.value.investmentAmount
  personalInfoForm4Edit.value.investors.idCardNumber=personalInfoForm.value.idCardNumber
  personalInfoForm4Edit.value.investors.photoPath=personalInfoForm.value.photoPath
  personalInfoForm4Edit.value.investorsvoZbs=personalInfoForm.value.investorsvoZbs
  personalInfoForm4Edit.value.projects=personalInfoForm.value.projects

  try {
    await axios.post('/Investors/edit', personalInfoForm4Edit.value);
    ElMessage.success("修改成功");
    handlerClose(); // 修改这里
    await nextTick();
    console.log(dialogVisibleInner.value)
  } catch (error) {
    console.error('提交表单失败:', error);
    ElMessage.error("修改失败，请稍后再试");
  };

};

// 重置表单
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped>
.add-contract {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-color);
  margin-top: 60px;
}

.card {
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}

.title {
  font-size: 1.2em;
  margin: 0;
  padding: 0;
}
.upload-corner {
  position: absolute;
  top: 1px;
  right: 40px;
}

.avatar-uploader .uploader-container {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.avatar-uploader .uploader-container:hover {
  border-color: #409eff;
}

.avatar-uploader .uploader-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.avatar-uploader .uploader-placeholder span {
  font-size: 14px;
  color: #909399;
  margin-top: 8px;
}

.avatar-uploader .avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
</style>